<template>
  <view class="cookContainer">
    <!-- :title="'首页'" -->
	<cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'厨师详情'">
	</cunstom_navigation_bar>
    <view class="contentBox">

      <view class="mouduleLine">
        <view class="mouduleBox">
          <!-- <view v-for="">{{}}</view> -->
          <view class="moudule" :class="selectedIndex == index?'selected':''" v-for="(item,index) in cuisineList"
            @tap="changeIndex(index,item)">
            {{item.name}}
          </view>

        </view>

      </view>
      <view class="typesLine">
        <view v-for="(item,index) in typeLines" :class="selectedTypeIndex === index?'eachType red':'eachType' "
          @tap="changeType(index)">
          {{item.name}}
          <image v-if="selectedTypeIndex === index" src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/upArrow.png">
          </image>
          <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/downArrow.png"></image>
        </view>
        <!-- <uni-data-select placeholder="星级" v-model="starLevel" :localdata="rangeProperty"></uni-data-select>
        <uni-data-select placeholder="距离" v-model="starLevel" :localdata="rangeProperty"></uni-data-select>
        <uni-data-select placeholder="好评" v-model="starLevel" :localdata="rangeProperty"></uni-data-select>
        <uni-data-select placeholder="接单次数" v-model="starLevel" :localdata="rangeProperty"></uni-data-select> -->
        <!-- <view class="valueBox">
           <view class="value" v-for="(itemV,indexV) in item.values">
            <view>{{itemV.value}}</view>
            <image v-if="itemV.selectedValue" src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/upArrow.png"></image>
            <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/downArrow.png"></image>
          </view>  
        </view> -->

      </view>
      <view class="uni-list" v-if="selectedTypeIndex==0||selectedTypeIndex==1">
        <radio-group @change="radioChange">
          <label class="uni-list-cell uni-list-cell-pd" v-for="(itemV,indexV) in typeLines[selectedTypeIndex].values"
            :key="itemV.value">
            <view>
              <radio :value="itemV.value" color="#D93F11" :checked="index === item.current" />
            </view>
            <view>{{itemV.name}}</view>
          </label>
        </radio-group>
      </view>
      <view class="uni-list dpBox" v-if="selectedTypeIndex==2||selectedTypeIndex==3">
        <view v-for="(itemV,indexV) in typeLines[selectedTypeIndex].values"
          :class="itemV.checked=='true'?'typeBox red':'typeBox'" @tap="addType(indexV)">{{itemV.name}} </view>
      </view>


      <view class="cookList">
        <view class="cookBox" v-for="(item,index) in cookList">
          <view class="leftBox" @tap="jumpTo(item)">
            <image :src="imgDomain + item.avatar"></image>
          </view>
          <view class="rightBox">
            <view class="line1">
              <view class="name">{{item.name}}</view>
              <view class="level">{{item.nickname}}</view>
            </view>
            <view class="line2">
              {{item.cook_age}}年厨龄 | 评分{{item.score_star}}分
            </view>
            <!--
            <view class="line3">
              <view class="type" v-for="(itemT,indexT) in item.types">{{itemT}}</view>
            </view>
            <view class="line4">
              <view class="title" v-for="(itemJ,indexJ) in item.titles">{{itemJ}}</view>
            </view>
			-->
            <view class="line3">
              <view class="type" v-for="(cuisine,idx) in getCuisineByIds(item.cuisine_ids)">{{cuisine.name}}</view>
            </view>
            <view class="line4">
              <view class="type">{{item.desc}}</view>
            </view>
            <view class="line5">
              <view class="left">我想加入</view>
              <view class="right" @tap="showCook(item)">
                <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/button.png"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="specificationsMask" catchtouchmove='true' v-if="showSpecificationsPopup">
      <view class="mask" @click="showSpecificationsPopup =false"></view>
      <view class="specificationsPopup">

        <view class="productInfo">
          <image :src="imgDomain + cookInfo.avatar" class="selectedImg">
          </image>
          <view class="middleTxt">
            <view class="productName">请选择规格，代购食材</view>
            <view class="type">1件超值换购</view>
            <view class="price">￥{{price}}</view>
          </view>

        </view>
        <view class="specifications">
          <view class="title">规格</view>
          <view class="speciLine">
            <view :class="currentType == idx?'eachSelected':'each'" v-for="(item,idx) in typeList"
              @tap="selectType(idx)"> {{ item.goods_sku_text}} </view>
          </view>
        </view>
        <view class="specifications">
          <view class="title">代购食材</view>
          <view class="speciLine">
            <view :class="currentBuy == idx?'eachSelected':'each'" v-for="(item,idx) in buyList" @tap="selectBuy(idx)">
              {{ item.name }}</view>

          </view>
        </view>

        <view class="productQuantity">
          <view class="left">
            <view class="title">购买数量</view>

          </view>
          <view class="right">
            <view class="add" @tap="changeCurrentNum(-1)">-</view>

            <view class="currentNum">
              {{currentNum}}

            </view>
            <view class="subtraction" @tap="changeCurrentNum(1)">+</view>

          </view>
        </view>
        <view class="specifications">
          <view class="title">
            预约时间<span style="color: red;">*</span>
          </view>
          <uni-datetime-picker type="datetime" :clear-icon="false" v-model="pickUpTime" :start="'{{startDate}}'"
            @change="chooseTime">
            <view class="bar">
              <view class="left">{{pickUpTime?pickUpTime:'选择预约时间'}}</view>
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/timeIcon.png">
            </view>
          </uni-datetime-picker>
        </view>
        <view class="buttons">
          <view class="buy" @tap="jumpUrl()">确定</view>
        </view>
      </view>
    </view>
    <view class="zhanwei"></view>
  </view>


  </view>
</template>

<script>
  const api = require("@/utils/api.js");
  const util = require("@/utils/util.js");
  const app = getApp();

  // import cunstomNavigationBar from '../../components/customNavigationBar/customNavigationBar.vue'
  export default {
    data() {
      return {
        currentNum: 1,
        imgDomain: '',
        totalCount: 0,
        cookInfo: null,
        showSpecificationsPopup: false,
        selectedTypeIndex: 999, 
                propStyles: {
                    // iconSrc: "../https://visionmpapi.jiuerjindi.com/upload/mp/ucenter/backIcon.png",
                    iconSrc: "black",
                    // bgColor: '#FECF01', 
                },
        typeLines: [
          {
            name: '星级',
            selected: false,
            current: 0,
            values: [
              {
                value: '三星级',
                name: '三星级',
                checked: 'true'
              },
              {
                value: '四星级',
                name: '四星级',
                checked: 'false'
              },
              {
                value: '五星级',
                name: '五星级',
                checked: 'false'
              },
            ]
          },
          {
            name: '距离',
            selected: false,
            values: [
              {
                value: '1km',
                name: '1km',
                checked: 'true'
              },
              {
                value: '2km',
                name: '2km',
                checked: 'false'
              },
              {
                value: '5Km',
                name: '5Km',
                checked: 'false'
              },
            ]
          },
          {
            name: '好评',
            selected: false,
            values: [
              {
                value: '3.0分',
                name: '3.0分',
                checked: 'true'
              },
              {
                value: '4.0分',
                name: '4.0分',
                checked: 'false'
              },
              {
                value: '4.5分',
                name: '4.5分',
                checked: 'false'
              },
              {
                value: '5.0分',
                name: '5.0分',
                checked: 'false'
              },
              {
                value: '服务态度良好',
                name: '服务态度良好',
                checked: 'true'
              },
              {
                value: '味道好',
                name: '味道好',
                checked: 'true'
              },
            ]
          },
          {
            name: '接单次数',
            selected: false,
            values: [

              {
                value: '从多到少',
                name: '从多到少',
                checked: 'true'
              },
              {
                value: '从少到多',
                name: '从少到多',
                checked: 'false'
              },
              {
                value: '50以下',
                name: '50以下',
                checked: 'false'
              },
              {
                value: '50以上',
                name: '50以上',
                checked: 'false'
              },
              {
                value: '100以上',
                name: '100以上',
                checked: 'false'
              },
              {
                value: '500以上',
                name: '500以上',
                checked: 'false'
              },
              {
                value: '5k以上',
                name: '5k以上',
                checked: 'false'
              },
              {
                value: '1万以上',
                name: '1万以上',
                checked: 'false'
              },
            ]
          }
        ],
        cookList: [],
		cuisineList : [{id:0,name:'全部'}],
        starLevel: '',
        rangeProperty: [
          { value: 10101, text: "一星" },
          { value: 10102, text: "二星" },
          { value: 10103, text: "三星" },
          { value: 10104, text: "四星" },
          { value: 10105, text: "五星" },
        ],

        picData: [],
        codeId: '',
        openId: '',
        avatarUrl: 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait.png',
        hasLogin: false,
        indicatorDots: false,
        selectedIndex: 0,
        cookInfoData: [
          {
            nickName: 'charlotte',
            gender: 0,
            age: 26,
            addr: '广州',
            text: '厨娘平台真的很给力！！尽情享受',
            tag: '做饭教程',
            url: '',
            type: 'image',
            hashTag: '做饭',
            liked: 20,
            hasLiked: true,
            share: 33,
            comment: 209,
            collection: 99,
            hasCollect: true
          }
        ],
        productData: [
        ],

        imgUrl: '',
        mouduleTypes: [
        ],

        queryParams: {
          "page": 1,
          "limit": 20,
          "city": '苏州',
          "cuisine_ids": '2,34',
          "longitude": '120.598346',
          "latitude": '31.287181'
        },
		typeList:[],
		buyList:[],
		currentType: 0,
		currentBuy: 0,
		price: 0
      };
    },

    methods: {
      addType(index) {
        console.log(this.typeLines[this.selectedTypeIndex].values[index]);
        if (this.typeLines[this.selectedTypeIndex].values[index].checked == 'true') {
          this.typeLines[this.selectedTypeIndex].values[index].checked = 'false'

        } else {
          this.typeLines[this.selectedTypeIndex].values[index].checked = 'true'
        }

      },
      changeType(index) {
        console.log('111', this.selectedTypeIndex);
        console.log('222', index);
        if (this.selectedTypeIndex != index) {
          this.selectedTypeIndex = index
        } else {
          this.selectedTypeIndex = 999
        }
        console.log(this.selectedTypeIndex);
        console.log(this.typeLines[this.selectedTypeIndex].values);

      },
      changeIndex(index) {
        this.selectedIndex = index
      },
      closeInvitate() {
        this.$refs.popUpCoupon.close();
      },
      // 购买数量
      changeCurrentNum(num) {
        this.currentNum = this.currentNum + num;
        if (this.currentNum <= 1) {
          this.currentNum = 1;
        }
        this.price = this.typeList[this.currentType].price * this.currentNum;
      },
      // 预约
      showCook(item) {
        this.selectType(0);
        this.selectBuy(0);
        this.currentNum = 1;
        this.changeCurrentNum(0);

        this.showSpecificationsPopup = true;
        this.cookInfo = item;
      },
      selectType(idx) {
        this.currentType = idx;
        if (this.typeList) {
          this.price = this.typeList[idx].price;
        }
        this.currentNum = 1;
      },
      selectBuy(idx) {
        this.currentBuy = idx;
      },
      jumpTo(item) {
        uni.navigateTo({
          url: `/page_cookDetail/cookDetail?id=` + item.id,
        })
      },

	  jumpUrl(url){
		  uni.navigateTo({
		      url: url,
		  })
	  },
	  // 根据ids 获取菜品信息
	  getCuisineByIds(ids){
		const result = [];
		let b = ids.split(",");
		let a = this.cuisineList;
		if(b && a){
			for (let i = 0; i < b.length; i++) {
				const id = b[i];
				for (let j = 0; j < a.length; j++) {
					if (a[j].id === id) {
						result.push(a[j]);
					}
				}
			} 
		}
		// 返回结果数组
		return result;
	  },
      getCookList() {
        console.log("厨师列表");
        util.request(api.cookList,
          this.queryParams
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              this.cookList = res.data.data;
              this.totalCount = res.data.total;
            }

          }).catch((err) => {
            console.log('err', err)

          });
      },
      getGradeList() {
        let params = { page: 1, limit: 1000 };
        util.request(api.gradeList, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              this.gradeList = res.data.data;
            }

          }).catch((err) => {
            console.log('err', err)

          });
      },
      getCuisineList() {
        let params = { page: 1, limit: 1000 };
        util.request(api.cuisineList, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              //this.cuisineList = res.data.data;
              this.cuisineList = this.cuisineList.concat(res.data.data);
            }

          }).catch((err) => {
            console.log('err', err)

          });
      },
      getSku() {
        let params = {};
        util.request(api.getSku, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              this.typeList = res.data.listPrice;
              this.buyList = res.data.listData;

              // 初始化价格
              this.selectType(0);
            }

          }).catch((err) => {
            console.log('err', err)

          });
      }

    },

    mounted() {


    },
    created() {

    },
    // 上拉加载
    onReachBottom() {
      if (this.totalCount > this.cookList.length) {
        this.queryParams.page = this.queryParams.page + 1;
        this.getCookList();
      }
    },
    onLoad: function (option) {
      this.imgUrl = process.env.VUE_APP_BASE_URL + '/stage-api/file/statics'
      this.imgDomain = process.env.VUE_APP_BASE_URL;
      this.getCookList();
      this.getGradeList();
      this.getCuisineList();
      this.getSku();
	  console.log("->this.imgDomain:"+ this.imgDomain);
    },
    onUnload() {

    },
    onShow: function () {
      uni.hideTabBar()
      this.$refs.tabBar.changeCurrentPage(0)
    },

  };
</script>
<style lang="scss">
  page {
    height: 100vh;
    overflow: auto;
    background-color: #FFFFFF !important;
  }
</style>
<style lang="scss" scoped>
  page {
    background-color: #FFFFFF !important;
  }

  .cookContainer {
	  /*
    ::v-deep .companyInfoContainer {
      position: absolute;
      top: 0rpx;
      left: 0rpx;

      .navigationBar {
        background: transparent;
      }
    }*/
	
	    background: #f4f4f2;
	    box-sizing: border-box;
  }



  .contentBox {
    margin-top: 0rpx;

    .topBg {
      width: 100%;

      image {
        width: 100%;
      }

    }

    .billboard {
      width: 100%;
      height: 408rpx;
      /* padding: 30rpx; */
      background: url('https://visionmpapi.jiuerjindi.com/upload/mp/cook/billboardBg.png');
      background-size: cover;

      .shadow {
        width: 100%;
        height: 100%;
        padding: 30rpx;

        .title {
          width: 100%;
          text-align: center;
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          height: 60rpx;
          line-height: 60rpx;
        }

        .cooks {
          display: flex;
          justify-content: space-around;
          align-items: center;

          .chefBox {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          .chefImg {
            width: 43*2rpx;
            height: 58*2rpx;
          }

          .chefImgCenter {
            width: 63*2rpx;
            height: 83*2rpx;
          }

          .score {
            font-size: 16rpx;
            font-weight: 500;
            color: #FECF01;
            margin: 10rpx 0rpx;
          }

          .motto {
            font-size: 20rpx;
            font-weight: 500;
            color: rgba(51, 51, 51, 0.6);
            width: 200rpx;
            text-wrap: wrap;
          }
        }

      }
    }


    .bar {
      background-color: #f4f4f4;
      width: 100%;
      height: 154rpx;
      position: relative;
      display: flex;
      justify-content: center;

      .contain {
        display: flex;
        width: 700rpx;
        justify-content: space-around;
        align-items: center;
        height: 154rpx;
        background: #fff;
        border-radius: 30rpx;

        image {
          width: 165*2rpx;
          height: 154rpx;
        }
      }
    }

    .mouduleLine {
      width: 100%;
      overflow-x: scroll;
      padding-top: 0rpx;
      margin-bottom: 36rpx;
      background: #FFF;

      .mouduleBox {
        display: flex;
        justify-content: space-between;
        padding-left: 30rpx;


        .moudule {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 36rpx;
          /* color: #999999; */
          color: rgba(51, 51, 51, 0.6);
          margin-right: 40rpx;
          height: 55rpx;

          white-space: nowrap;
          text-align: center;

        }

        .selected {
          border-bottom: 6rpx solid #FECF01;
          font-weight: 500;
          font-size: 18px;
          color: #333333;
          height: 60rpx;
          margin-right: 40rpx;
        }
      }
    }

    .typesLine {
      width: 100%;
      display: flex;
      background: #FFF;
      margin: 32rpx 0rpx;
      justify-content: space-around;

      .eachType {
        image {
          width: 26rpx;
          height: 26rpx;
          margin-left: 10rpx;
        }

      }

      .red {
        color: #D93F11;
      }

      .valueBox {
        width: 100%;
        background: #FFF;
        border-radius: 0rpx 0rpx 30rpx 30rpx;
      }
    }

    .uni-list {
      position: absolute;
      z-index: 999 !important;
      background: #ffffff;
      width: 750rpx;

      /deep/ .uni-list-cell-pd {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        padding: 0rpx 30rpx;
        height: 100rpx;
        align-items: center;
      }

      .typeBox {
        padding: 0rpx 30rpx;
        height: 58rpx;
        line-height: 58rpx;
        background: rgba(43, 48, 59, 0.1);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        margin-right: 30rpx;
        margin-bottom: 26rpx;
      }

      .red {
        background: rgba(217, 63, 17, 0.1);
        color: #D93F11;
      }
    }

    .dpBox {
      padding: 60rpx 30rpx;
      display: flex;
      flex-wrap: wrap;
    }

    .cookList {

      padding: 0rpx 30rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .cookBox {
        width: 100%;
        height: 160*2rpx;
        margin-bottom: 10*2rpx;
        background: #FFF;
        display: flex;
        padding: 26rpx;
        border: 1rpx solid #ccc;
        border-radius: 20rpx;

        .leftBox {
          margin-right: 32rpx;

          image {
            width: 128*2rpx;
            height: 128*2rpx;
            border-radius: 20rpx;
          }

        }

        .rightBox {
          flex: 1;

          .line1 {
            display: flex;
            margin-bottom: 16rpx;
            align-items: center;

            .name {
              font-size: 32rpx;
              font-weight: 500;
              color: #333333;
              margin-right: 18rpx;
            }

            .level {
              font-size: 16rpx;
              width: 47*2rpx;
              line-height: 16*2rpx;
              height: 16*2rpx;
              border-radius: 10rpx;
              text-align: center;
              border: 1rpx solid #D93F11;
              color: #D93F11;
            }
          }

          .line2 {
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.6);
            margin-bottom: 16rpx;
          }

          .line3 {
            display: flex;

            .type {
              border-radius: 8rpx;
              font-size: 20rpx;
              padding: 2rpx 12rpx;
              color: #D93F11;
              background: #F9F5E6;
              margin-right: 8rpx;
              margin-bottom: 10rpx;
            }
          }

          .line4 {
            margin-bottom: 10rpx;

            .title {
              font-size: 20rpx;
              color: rgba(51, 51, 51, 0.6);
            }
          }

          .line5 {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
              width: 39.63*2rpx;
              height: 13.86*2rpx;
              border-radius: 10*2rpx;
              font-size: 8*2rpx;
              font-weight: 500;
              line-height: 13.86*2rpx;
              text-align: center;
              color: #D93F11;
              border: 1rpx solid #D93F11;
            }

            .right {
              image {
                width: 43*2rpx;
                height: 22*2rpx;
              }
            }
          }
        }



      }


    }


  }

  .specificationsMask {
    z-index: 999 !important;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;

    .mask {
      width: 100%;
      flex: 1;

    }

    .specificationsPopup {
      width: 100%;
      height: 1080rpx;
      background-color: #FFFFFF;
      border-radius: 20rpx 20rpx 0rpx 0rpx;


      .productInfo {
        display: flex;
        border-bottom: 1rpx solid #DEDEDE;
        padding-bottom: 30rpx;
        margin: 40rpx 23rpx 0rpx;

        .selectedImg {
          width: 208rpx;
          height: 208rpx;
          margin-right: 24rpx;
        }

        .middleTxt {
          .productName {
            width: 384rpx;
            height: 50rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;

          }

          .type {
            padding: 0rpx 6rpx;
            height: 34rpx;
            background: rgba(217, 63, 17, 0.1);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-size: 16rpx;
            color: #D93F11;
            line-height: 34rpx;
            text-align: center;
            display: inline-block;
            margin-top: 8rpx;
          }

          .price {
            margin-top: 12rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #D93F11;

          }
        }


      }

      .specifications {
        padding: 30rpx;

        .title {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 28rpx;
        }

        .speciLine {
          display: flex;

          .each {
            padding: 0rpx 16rpx;
            height: 40rpx;
            background: rgba(51, 51, 51, 0.1);
            border-radius: 214rpx 214rpx 214rpx 214rpx;
            margin-right: 28rpx;
            font-weight: 500;
            font-size: 18rpx;
            color: rgba(51, 51, 51, 0.8);
            line-height: 40rpx;
          }

          .eachSelected {
            padding: 0rpx 16rpx;
            height: 40rpx;
            background: #FECF01;
            border-radius: 214rpx 214rpx 214rpx 214rpx;
            margin-right: 28rpx;
            font-weight: 500;
            font-size: 18rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 40rpx;
          }
        }

        .bar {
          width: 690rpx;
          height: 88rpx;
          background: rgba(51, 51, 51, 0.1);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 24rpx;
          padding-right: 36rpx;

          .left {
            font-weight: 500;
            font-size: 28rpx;
            color: rgba(51, 51, 51, 0.4);
          }

          image {
            width: 52rpx;
            height: 52rpx;
          }
        }

      }



      .productQuantity {
        margin: 0rpx 23rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 6rpx dotted #ccc;
        height: 120rpx;

        .left {
          .title {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .stock {
            color: #999999;
            font-size: 22rpx;
            margin-top: 20rpx;
          }


        }

        .right {
          display: flex;

          .add,
          .subtraction {
            width: 70rpx;
            height: 70rpx;
            background: #F4F4F2;
            border-radius: 10rpx;
            text-align: center;
            line-height: 70rpx;
          }

          .currentNum {
            min-width: 70rpx;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            background: #FECF01;
            border-radius: 15rpx;
            margin: 0rpx 18rpx;
          }
        }

      }

      .buttons {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .buy {

          line-height: 98rpx;
          text-align: center;
          font-weight: 600;
          font-size: 32rpx;
          color: #333333;

          width: 692rpx;
          height: 98rpx;
          background: #FECF01;
          box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
        }
      }
    }
  }




  .zhanwei {
    width: 750rpx;
    height: 172rpx;
    background: #F4F4F2;
  }

  /deep/ .arrow-area {
    display: none;
  }

  /deep/ .input-value-border {
    border: none
  }

  /deep/ .placeholder {
    font-size: 29rpx;
    color: #FECF01;
  }

  /deep/ .input-value {
    padding-right: 34rpx;
    padding-left: 10rpx;
  }

  /deep/ .is-input-border {
    border-radius: 20rpx;
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
</style>